import { UploadOutlined } from '@ant-design/icons';
import {
  Button,
  Form,
  Input,
  Select,
  Space,
  Upload,
  message,
  Card,
} from 'antd';
import TextArea from 'antd/es/input/TextArea';
import React, { useState } from 'react';
import {getCharByAiAsyncRabbitUsingPost, getCharByAiAsyncUsingPost} from "@/services/pikimbi/chartController";
import {ProForm} from "@ant-design/pro-form";
import useForm = ProForm.useForm;



/**
 * 添加图表页面
 * @constructor
 */
// 把多余的状态删掉，页面名称改为AddChart
const AddChartAsync: React.FC = () => {

  // 定义状态，用来接收后端的返回值，让它实时展示在页面上
  // 提交中的状态，默认未提交
  const [submitting, setSubmitting] = useState<boolean>(false);
  const [form] = useForm();

  /**
   * 提交
   * @param values
   */
  const onFinish = async (values: any) => {
    // 如果已经是提交中的状态(还在加载)，直接返回，避免重复提交
    if (submitting) {
      return;
    }
    // 当开始提交，把submitting设置为true
    setSubmitting(true);

    // 对接后端，上传数据
    const params = {
      ...values,
      file: undefined,
    };
    try{
      // const res = await getCharByAiAsyncUsingPost(params, {}, values.file.file.originFileObj);
      const res = await getCharByAiAsyncRabbitUsingPost(params, {}, values.file.file.originFileObj);
      if (!res?.data) {
        message.error(res.message);
      } else {
        message.success('分析成功,请稍后到 我的图表 查看');
        form.resetFields();
      }
    }catch (e: any){
      message.error("分析失败"+e.message);
    }
    setSubmitting(false);
  };

  return (
    // 把页面内容指定一个类名add-chart
    <div className="add-chart-async">
          <Card title="智能分析">
            <Form
              form={form}
              name="addChart"
              labelAlign="left"
              // label标签布局，同<Col>组件，设置 span offset 值，如 {span: 3, offset: 12}
              labelCol={{ span: 2 ,offset: 3}}
              // 设置控件布局样式
              wrapperCol={{ span: 16 }}
              onFinish={onFinish}
              // 初始化数据啥都不填，为空
              initialValues={{  }}
            >
              <Form.Item name="chartName" label="图表名称">
                <Input placeholder="请输入图表名称" />
              </Form.Item>

              {/* 图表类型是非必填，所以不做校验 */}
              <Form.Item
                name="chartType"
                label="图表类型"
              >
                <Select
                  options={[
                    { value: '折线图', label: '折线图' },
                    { value: '柱状图', label: '柱状图' },
                    { value: '堆叠图', label: '堆叠图' },
                    // { value: '雷达图', label: '雷达图' },
                    { value: '饼图', label: '饼图' },
                  ]}
                />
              </Form.Item>

              <Form.Item name="goal" label="分析目标" rules={[{ required: true, message: '请输入分析目标!' }]}>
                <TextArea placeholder="请输入你的分析需求，比如：分析网站用户的增长情况"/>
              </Form.Item>

              <Form.Item
                name="file"
                label="原始数据"
              >
                <Upload name="file" maxCount={1}>
                  <Button icon={<UploadOutlined />}>上传 xlsx 文件</Button>
                </Upload>
              </Form.Item>
              {/* offset设置和label标签一样的宽度，这样就能保持对齐；
                  其他占用的列设置成16 */}
              <Form.Item wrapperCol={{ span: 2, offset: 5 }}>
                <Space>
                  <Button type="primary" htmlType="submit" loading={submitting} disabled={submitting}>
                    提交
                  </Button>
                  <Button htmlType="reset">重置</Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>
    </div>
  );
};
export default AddChartAsync;

